<template>
	<view class="container">
		<view class="list-item">
			<view class="dis-flex" style="flex-direction: row;padding: 22rpx;">
				<view class="font-w600" style="flex: 1;font-size: 34rpx;" @click="navTo('/pages/course/school?id='+info.campus_info.id+'&name='+info.campus_info.name)">{{info.campus_info.name}} ></view>
				<view class="order-status">{{info.status_tip}}</view>
			</view>
			<view class="dis-flex" @click="navTo('/pages/course/detail_text?id='+info.id)">
				<view class="list-img">
					<image :src="info.discover" mode="aspectFill"></image>
				</view>
				<view class="list-title">
					<view class="list-title-name">{{info.name}}</view>
					<view class="list-detail">
						<view style="flex: 1;width: 200rpx;">已上{{info.course_section_complete_info_count}}节/共{{info.course_section_info_count}}节</view>
						<view class="pad-r22">距您{{info.campus_info.distance}}</view>
					</view>
					<view class="list-date">开课日期:{{info.course_time}}</view>
					<view class="list-op">
						<view class="font-w600">{{info.price}}</view>
						<view class="sign-coin-detail">
							签到最高可领{{info.score}}积分</view>
					</view>
				</view>
				
			</view>
			<view  class="line"></view>
			<view style="display: flex;margin: 24rpx;flex-direction: column;" class="font-s-14">
				
				<view class="dis-flex margin-t-20">
					<view style="flex: 1;">上课教室</view>
					<view class="font-color-9">{{info.class_room}}</view>
				</view>
				<view class="dis-flex margin-t-20">
					<view style="flex: 1;">上课时间</view>
					<view style="color:#0191FF ;">{{info.sksj}}</view>
				</view>
			</view>
		</view>
	
		<view class="dis-two-flex">
			<view class="turn-s">
				<view class="flex1">本人出勤课节</view>
				<view>{{had}}</view>			
			</view>
			<view class="turn-s">
				<view class="flex1">本人缺勤课节</view>
				<view>{{total-future-had}}</view>			
			</view>
		</view>
		
		<view class="bg-white" style="margin-bottom: 130rpx;">
			<view class="course-name">课程目录</view>
			<view v-for="(item,index) in info.course_section_info" :key="index">
				<view class="two-col-w align-i-center">
					<view v-if="item.show_yuan_index==index" style="height: 12rpx;width: 16rpx;background: #0191FF;border-radius: 50%;"></view>
					<view v-else style="height: 12rpx;width: 16rpx;"></view>
					<view class="w-120 section">第{{item.serial_number}}节</view>
					<view class="section-list-name" :class="{'color-h':item.show_hui==1}">{{item.name}}</view>
				</view>
				<view class="section-date" :class="{'color-h':item.show_hui==1}">{{item.sk_time}}  {{item.begin_time}}-{{item.end_time}}</view>
			</view>
			
		</view>
		<view class="bottom-view">
			
			<view class="btn" v-if="info.status==2" style="border: 1px solid #0191FF;"   @click="goSign()">签到</view>
			
		</view>
		
	</view>
</template>

<script>
	import Api from '@/common/api';
	import { mapState } from 'vuex';  
	export default {
		
		data() {
			return {
				course_id:0,
				info:{},
				lat:'',
				lng:'',
				disbaoming:false,
				total:0,
				had:0,
				future:0,
				state:0
			}
		},
		
		onLoad(option) {
			this.course_id =option.id;
			this.state =option.state;
			let loc = uni.getStorageSync('loc');
			if(loc!=''){
				this.lat=loc.lat;
				this.lng=loc.lng;
			}
			this.getDetail()
		},
		computed: {
			...mapState(['hasLogin','userInfo','user_role'])
		},
		methods: {
			async gateStatics(){
				let params = {course_id:this.course_id};
				let data = await Api.apiCall('get', Api.apiName.course_teacher_gate_statics, params);
				if (!data ||data.code!=0) {
					return;
				}
				this.total = data.data.total;
				this.had=data.data.had;
				this.future=data.data.future;
			},
			async getDetail() {
				let params = {
					c_id: this.course_id,
					lat:this.lat,
					lng:this.lng
				}
				let data = await Api.apiCall('get', Api.apiName.teacher_course_detail, params);
				if (!data || data.code != 0) {
					return;
				}
				this.info = data.data;
				
				uni.setNavigationBarTitle({
					title:this.state==1?'待上课':'已结课'
				});
				this.gateStatics()
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
				
			},
			goSign(){
				if(!this.hasLogin){
					uni.navigateTo({
						url:'/pages/pulic/wxLogin'
					})
					return;
				}
				uni.switchTab({
					url:'/pages/sign/index'
				})
			},
			
			clipData(c_data){
				uni.setClipboardData({
					data:c_data,
					showToast:true
				})
			},
			
		},


	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}
	
	.container {
		height: 100vh;
		overflow: auto;
	}
	.dis-flex{
		display: flex;
	}
	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 24rpx;
		border-radius: 20rpx;
		flex-direction: column;
	}
	
	.list-img {
		padding: 20rpx;
		image {
			display: inline-block;
			width: 230rpx;
			height: 230rpx;
			border-radius: 20rpx;
		}
	}
	
	.list-title {
		margin-left: 20rpx;
		margin-top: 30rpx;
		font-size: 14px;
		width:100%;
	}
	
	.list-title-name {
		font-size: 30rpx;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 414rpx;
	}
	
	.list-detail {
		display: flex;
		color: #999999;
		margin-top: 24rpx;
	}
	
	.list-date {
		color: #999999;
		margin-top: 24rpx
	}
	
	.list-op {
		margin-top: 24rpx;
		display: flex;
		color: #ff0000;
		align-items: center;
	}
	.pad-r22{
		padding-right: 22rpx;
	}
	.font-w600{
		font-weight: 600;
	}
	.sign-coin-detail{
		margin-left: 14rpx;
		font-size: 20rpx;
		border: 1px solid #ff0000;
		padding: 4rpx
	}
	.order-status{
		font-size: 30rpx;
		color:#999999;
	}
	
	.bg-white{
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		font-size: 24rpx;
	}
	.two-col{
		display: flex;
		padding: 20rpx 0rpx;
	}
	.two-col-w{
		display: flex;
		padding: 20rpx 0rpx;
	}
	.course-name{
		font-size: 32rpx;
		font-weight: 600;
	}
	.align-i-center{
		align-items: center;
	}
	.w-120{
		width: 120rpx;
		// font-weight: 600;
	}
	.section{
		border: 1px solid #0191FF;
		padding: 4rpx;
		text-align: center;
		color:#0191FF;
		margin-left: 10rpx;
	}
	.section-list-name{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left: 48rpx;
		width: 636rpx;
	}
	.section-date{
		padding-left: 164rpx;
		color:#000000;
	}
	.line{
		height: 2rpx;
		background: #ECECEC;
		width: 90%;
		margin: 10rpx auto;
	}
	.font-s-14{
		font-size: 28rpx;
	}
	.margin-t-20{
		margin-top: 20rpx;
	}
	.font-color-9{
		color: #999999;
	}
	.dis-two-flex{
		display: flex;
		flex-direction: row;
		margin: 24rpx;
		justify-content: center;
	}
	.turn-s{
		background: #FFFFFF;
		display: flex;
		padding: 30rpx;
		width: 50%;
		border-radius: 20rpx;
		margin: 0rpx 4rpx;
		font-size: 26rpx;
	}
	.flex1{
		flex: 1;
	}
	.bottom-view{
		position: absolute;
		bottom: 0rpx;
		height: 100rpx;
		background: #f5f5f5;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.2);
	}
	.btn{
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		border: 1px solid #999999;
		margin: 18rpx 40rpx 18rpx 10rpx;
		padding: 2rpx 20rpx;
		color: #0191FF;
		font-size: 26rpx;
	}
	.color-h{
		color: #999999;
	}

</style>